import OrbitControls from "../../../../../../../webThree/src/main/resources/controls/OrbitControls";

const React =qguan('ThreeReact');
const THREE =qguan("three")
const OrbitControls =qguan("OrbitControls")
export default class ShoppingList extends React.Component {
    constructor(props) {
        super(props)
        //状态值
        this.state = {
            inputValue:'',
            textareaValue:''
        }






    }
    /*
           1、初始化渲染器
       */
    findRenderer(){
        if(!  this.renderer){
            this.renderer = new THREE.webGLRenderer();
            // renderer.setClearColor('white');//设置渲染出来的背景色
            this. renderer.setPixelRatio( window.devicePixelRatio );
            this.renderer.setSize(window.innerWidth,window.innerHeight);
        }
        return this.renderer;
    }





    /**
     * 相机
     * @returns {THREE.perspectiveCamera|*}
     */
    findCamera(){
        if(!this.camera){
            this.camera  = new THREE.perspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,2000);
            this.camera.position.set(10,10,800);
        }
        return this.camera;
    }

    /*
         3、初始化场景
     */
    findScene(){

        if(    this.scene ){
            this.scene = new THREE.Scene();
            this. scene.background = new THREE.Color(0xf0f0f0);　//背景

            light = new THREE.AmbientLight(0xfefefe); //光线
            this. scene.add(light);
            this. scene.add( new THREE.PointLightHelper( light, 15 ) );
            /*
                4、添加辅助坐标轴
            */
            var axes = new THREE.AxisHelper(800);
            this. scene.add(axes);

            /*
                5、添加地面网格
            */
            /**
             * size 网格总边长
             * step 网格个数
             * colorCenterLine  网格中心线颜色
             * colorGrid    网格其他线颜色
             */
            var gridHelper = new THREE.GridHelper( 300, 10, 'red', 'gray' );
            gridHelper.position.y = -100;
            gridHelper.position.x = 0;
            this. scene.add( gridHelper );
        }

    }
    /**
     * 控制器
     * @returns {OrbitControls}
     */
    findControls(){
        if(!this.controls ){
            this.controls = new OrbitControls( this.camera, this.renderer.domElement);
        }
        return this.controls;
    }

    material(){
        return <meshBasicMaterial   style={[{color:"red"}]}></meshBasicMaterial>
    }
    mode(){
        return <boxGeometry   style={[20,20,20]}></boxGeometry>
    }

    //生成canvas素材
      faces(rgbaColor) {
        var canvas = document.createElement('canvas');
        canvas.width = 256;
        canvas.height = 256;
        var context = canvas.getContext('2d');
        if (context) {
            //画一个宽高都是256的黑色正方形


            context.fillStyle = 'rgba(256,256,256,1)';
            context.fillRect(0, 0, 256, 256);
            //在内部用某颜色的16px宽的线再画一个宽高为224的圆角正方形并用改颜色填充
            context.rect(16, 16, 224, 224);
            context.lineJoin = 'round';
            context.lineWidth = 16;
            context.fillStyle = rgbaColor;
            context.strokeStyle = rgbaColor;
            context.stroke();
            context.fill();
        } else {
            alert('您的浏览器不支持Canvas无法预览.\n');
        }
        return canvas;
    }
    render() {
        var geometry = new THREE.boxGeometry(20,20,20);//盒子模型
        var material = new THREE.meshBasicMaterial({color:"red"});//材料
        var materials = [];
        var myFaces = [];
        var cubeParams = {//魔方参数
            x:-75,
            y:75,
            z:75,
            num:3,
            len:50,
            colors:['rgba(255,193,37,1)','rgba(0,191,255,1)',
                'rgba(50,205,50,1)','rgba(178,34,34,1)',
                'rgba(255,255,0,1)','rgba(254,254,254,20)']
        };
        //一个小正方体有六个面，每个面使用相同材质的纹理，但是颜色不一样
        myFaces.push(this.faces(cubeParams.colors[1]));
        myFaces.push(this.faces(cubeParams.colors[2]));
        myFaces.push(this.faces(cubeParams.colors[4]));
        myFaces.push(this.faces(cubeParams.colors[5]));
        myFaces.push(this.faces(cubeParams.colors[3]));
        myFaces.push(this.faces(cubeParams.colors[0]));
        for (var k = 0; k < 6; k++) {
            var texture = new THREE.texture(myFaces[k]);
            texture.needsUpdate = true;

            materials.push(new THREE.meshLambertMaterial({
                name:"----------------"+k,
                map: texture
            }));
            materials.specular = new THREE.color(this.specular);
        }
        let  cubemat = new THREE.meshFaceMaterial(materials);
        let solid=[];
        return (
            <mesh   style={[geometry, cubemat]}>
            </mesh>
        );
    }
}





